<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shopping List</title>
    <script src="js/example.js"></script>
</head>
<body>
<h1>What to buy</h1>
    <p title="A gentle reminder">Don't forget to buy this stuff.</p>
    <ui id="purchase">
        <li>A tin of beans</li>
        <li class="sale">Cheese</li>
        <li class="sale important">Milk</li>
    </ui>

    <div id="testdiv">
    </div>

    <script src="js/example.js"></script>
    <script>
        insertParagraph("welcome to joe's land!");
    </script>
    <script>
        function getElementsByClassName(node, className) {
//            if (node.getElementsByClassName(className)) {
//                return node.getElementsByClassName(className);
//            } else{
                var results = new Array();
                var items = node.getElementsByTagName("*");
                for (var i=0 ; i<items.length; i++) {
                    if (items[i].className.indexOf(className) != -1) {
                        results[results.length] = items[i];
                    }
                }

                return results;
//            }
        }

//        var list = document.getElementById("purchase");
//        var li = document.createElement("li");
//        li.setAttribute("title", "good fruit");
//        li.textContent = "orange";
//        list.appendChild(li)
//        alert(getElementsByClassName(list, "sale").length)
//        alert(document.getElementsByTagName("p")[0].getAttribute("title"));
        window.onload = function () {
//            alert(document.getElementById("testdiv").innerHTML)
//            var test = document.getElementById("testdiv");
//            test.innerHTML = "<p>This is <em>my</em> content</p>";
            domInsert();
        };

    </script>
</body>
</html>
